<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            position: relative;
            width: 600px;
            height: 600px;
            margin: 20px auto;
            background-color: black;
        }

        .box .tank {
            position: absolute;
            left: calc(50% - 30px);
            top: 540px;
            width: 60px;
            height: 60px;
            background: url('./images/tankT.png') center no-repeat;
        }

        .box img {
            position: absolute;
            width: 20px;
            height: 20px;
            left: calc(50% - 10px);
            top: 560px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="tank"></div>
    </div>

    <script>
        // 获取元素
        const box = document.querySelector('.box');
        const tank = document.querySelector('.tank');

        // 键盘事件
        let count = 1; //计数器
        let direction = 'T'; //坦克方向
        document.addEventListener('keydown', function (e) {
            // 最大活动范围值
            let diffX = box.clientWidth - tank.offsetWidth;
            let diffY = box.clientHeight - tank.offsetHeight;
            // 步进值
            let stepX = parseInt(diffX / 50);
            let stepY = parseInt(diffY / 50);
            // 坦克边距
            let top = tank.offsetTop;
            let left = tank.offsetLeft;

            // 上38 下40 左37 右39

            // 上移动
            if (e.keyCode == 38) {
                direction = 'T';
                top -= stepY;
                if (top < 0) top = 0;
                tank.style.top = `${top}px`;
                tank.style.backgroundImage = count % 2 ? 'url(./images/tankT.png)' : 'url(./images/tankT1.png)';
                count++;
            }
            // 下移动
            if (e.keyCode == 40) {
                direction = 'B';
                top += stepY;
                if (top > diffY) top = diffY;
                tank.style.top = `${top}px`;
                tank.style.backgroundImage = count % 2 ? 'url(./images/tankB.png' : 'url(./images/tankB1.png)';
                count++;
            }
            // 左移动
            if (e.keyCode == 37) {
                direction = 'L';
                left -= stepX;
                if (left < 0) left = 0;
                tank.style.left = `${left}px`;
                tank.style.backgroundImage = count % 2 ? 'url(./images/tankL.png' : 'url(./images/tankL1.png)';
                count++;
            }
            // 右移动
            if (e.keyCode == 39) {
                direction = 'R';
                left += stepX;
                if (left > diffX) left = diffX;
                tank.style.left = `${left}px`;
                tank.style.backgroundImage = count % 2 ? 'url(./images/tankR.png)' : 'url(./images/tankR1.png)';
                count++;
            }

            // 空格发炮弹
            if (e.keyCode == 32) {
                shot(direction);
            }

            // 装弹
            function shot(direction) {
                // 设置步进
                let pStepX = 10;
                let pStepY = 10;
                let img = document.createElement('img');
                box.appendChild(img);
                if (direction == 'T' || direction == 'B') {
                    img.style.top = `${tank.offsetTop + 20}px`;
                }
                if (direction == 'L' || direction == 'R') {
                    img.style.left = `${tank.offsetLeft + 20}px`;
                }
                img.src = `./images/zidan${direction}.png`;
                let pTop = box.querySelector('img').offsetTop;
                let pLeft = box.querySelector('img').offsetLeft;
                let timer = setInterval(function () {
                    if ((direction == 'T' && pTop <= 0) || (direction == 'L' && pLeft <= 0) || (direction == 'B' && pTop > box.offsetHeight - 20) || (direction == 'R' && pLeft > box.offsetWidth - 20)) {
                        clearInterval(timer);
                        box.querySelector('img').remove();
                    }
                    if (direction == 'T' || direction == 'B') {
                        if (direction == 'T') pTop -= pStepY;
                        else pTop += pStepY;
                        box.querySelector('img') && (box.querySelector('img').style.top = `${pTop}px`);
                    }
                    if (direction == 'L' || direction == 'R') {
                        if (direction == 'L') pLeft -= pStepX;
                        else pLeft += pStepX;
                        box.querySelector('img') && (box.querySelector('img').style.left = `${pLeft}px`);
                    }
                }, 15);
            }
        });
    </script>
</body>

</html>